<template>
	<view style="height: 100%;">
		<u-navbar title="用户认证" autoBack placeholder :border="false"></u-navbar>
		<view class="bgc-color"></view>
		<view class="login-box" :style="{height: height}">
			<u--form labelWidth="auto" labelPosition="top" :labelStyle="labelStyle" :model="model"
				ref="form">
				<u-form-item label="用户姓名" prop="userInfo.realname" borderBottom ref="realname">
					<u--input v-model="model.userInfo.realname" placeholder="请输入用户姓名" border="none"></u--input>
				</u-form-item>
				<u-form-item label="性别" prop="userInfo.sex" borderBottom ref="sex">
					<u-radio-group v-model="model.userInfo.sex" placement="row">
						<u-radio :activeColor="appColor" :customStyle="{marginRight: '12px'}" v-for="(item, index) in sexList" :key="index"
							:label="item.title" :name="item.value">
						</u-radio>
					</u-radio-group>
				</u-form-item>
			</u--form>
			<view class="submit-box">
				<u-button @click="save" type="primary" text="提交" shape="circle"></u-button>
			</view>
		</view>
	</view>
</template>

<script>
	import {perfect, userQueryById} from '@/api/home.js';
	import {mapState, mapActions} from 'vuex';
	export default {
		data() {
			return {
				model: {
					userInfo: {
						realname: '',
						sex: 1,
					},
				},
				labelStyle: {
					color: '#000',
					fontWeight: 'bold'
				},
				sexList: [
					{title: '男', value: 1},
					{title: '女', value: 2},
				],
			}
		},
		computed: {
			...mapState(['userInfo']),
			height() {
				let height = this.statusBarHeight + 44 + 70 + 'px';
				return `calc(100vh - ${height})`
			},
			appColor() {
				return '#e1251b'
			}
		},
		onLoad() {
			if(this.userInfo.isPerfect === '1') {
				const {realname, address, sex, idCard} = this.userInfo
				this.model.userInfo.realname = realname;
				this.model.userInfo.sex = sex;
			}
		},
		methods: {
			save() {
				let {realname, sex} = this.model.userInfo
				realname = uni.$u.trim(realname);
				if(!uni.$u.test.rangeLength(realname, [2, 10])) {
					this.$cuTip('请输入正确的姓名');
					return
				}
				this.$cuLoading('完善中...').then(() => {
					perfect({realname, sex, id: this.userInfo.id}).then(res => {
						uni.hideLoading();
						this.$cuTip('完善成功').then(() => {
							uni.navigateBack({
								delta:1 
							})
						})
					})
				})
			}
		}
	}
</script>

<style>
	page {
		background-color: #f5f5f5;
		height: 100%;
	}
</style>

<style lang="scss" scoped>
	.bgc-color {
		height: 70px;
		background: $uni-color-primary;
		border-radius: 6% / 0 0 100% 100%;
	}

	.login-box {
		margin: 0 32rpx;
		border-radius: 16rpx;
		position: relative;
		top: -100rpx;
		background-color: #fff;
		padding: 16rpx 32rpx;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.2);
		.submit-box {
			width: calc(100% - 64rpx);
			position: absolute;
			bottom: 32rpx;
			left: 32rpx;
		}
		
	}
</style>
